<%--
  Created by IntelliJ IDEA.
  User: LW
  Date: 2022/10/3
  Time: 22:48
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>登录&注册</title>
    <link rel="stylesheet" type="text/css" href="../asset/css/reg.css"/>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <script src="../asset/js/jquery-3.6.1.min.js"></script>
</head>
<body>

<div class="form-div">
    <div class="reg-content">
        <h1>欢迎注册</h1>
        <span>已有帐号？</span> <a href="login1.jsp">登录</a>
    </div>
    <form action="http://localhost:8080/01_46_luowei_war/intoServlet" method="post">
        <table>
            <tr>
                <td><b style="font-weight: bold">账号：</b></td>
                <td class="inputs">
                    <input name="usersname" type="text" id="username">
                    <br>
                    <span id="username_err" class="err_msg" style="display: none">账号必须在6-12位</span>
                    <span id="username_er" class="err_msg" style="display: none">该账号已经存在</span>
                </td>
            </tr>
            <tr>
                <td><b style="font-weight: bold">密码:</b></td>
                <td class="inputs">
                    <input name="passwd" type="password" id="password">
                    <br>
                    <span id="password_err" class="err_msg" style="display: none">密码需要在6-12位</span>
                </td>
            </tr>

            <tr>
                <td><b style="font-weight: bold">确认密码:</b></td>
                <td class="inputs">
                    <input type="password" name="repassword" id="repasswd"><br/>
                    <span id="repassword_err" class="err_msg" style="display: none">两次密码不一致</span>
                </td>
            </tr>

            <tr>
                <td><b style="font-weight: bold">姓名:</b></td>
                <td class="inputs">
                    <input type="text" name="name" id="name"/><br/>
                    <span id="xm" class="err_msg" style="display: none">姓名不能为空</span>
                </td>
            </tr>

            <tr>
                <td style=""><b style="font-weight: bold">性别:</b></td>
                <td class="sex">
                    <span class="nan"><input type="radio" name="sex" value="man" /><b style="font-weight: bold">男</b><input type="radio" name="sex" value="woman"  checked/><b style="font-weight: bold">女</b></span>

                </td>
            </tr>
            <tr>
                <td><b style="font-weight: bold">职业:</b></td>
                <td class="inputs">
                    <input type="text" name="work">
                </td>
            </tr>
            <tr>
                <td><b style="font-weight: bold">爱好:</b></td>
                <td >
                    <input type="checkbox" name="hobby" value="basketball"/><b style="font-weight: bold">篮球</b>
                    <input type="checkbox" name="hobby" value="football" /><b style="font-weight: bold">足球</b>
                    <input type="checkbox" name="hobby" value="study" /><b style="font-weight: bold">篮球</b>
                    <input type="checkbox" name="hobby" value="read"/><b style="font-weight: bold">学习</b>
                    <input type="checkbox" name="hobby" value="music" /><b style="font-weight: bold">读书</b>
                    <input type="checkbox" name="hobby" value="chicken"/><b style="font-weight: bold">听歌</b>
                </td>
            </tr>
            <tr>
                <td><b style="font-weight: bold">个人说明:</b></td>
                <td class="inputs">
                    <textarea name="remark" id="remake"></textarea>
                </td>
            </tr>

        </table>

        <input type="submit" value="注册" id="reg_btn"/>

    </form>
</div>

<script>
    var usernameInput = document.getElementById("username");
    usernameInput.onblur = checkUsername;
    function checkUsername() {
        var username = usernameInput.value.trim();

        var reg = /^\w{6,12}$/;
        var flag = reg.test(username);
        if (flag) {
            document.getElementById("username_err").style.display = 'none';
        } else {
            document.getElementById("username_err").style.display = '';
        }


        return flag;
    }
    var passwordInput = document.getElementById("password");
    passwordInput.onblur = checkPassword;
    function checkPassword() {
        var password = passwordInput.value.trim();
        var reg = /^\w{6,12}$/;
        var flag = reg.test(password);
        if (flag) {
            document.getElementById("password_err").style.display = 'none';
        } else {
            document.getElementById("password_err").style.display = '';
        }
        return flag;
    }
    var repasswordInput=document.getElementById("repasswd");
    repasswordInput.onblur=checkRepasswd;
    function checkRepasswd(){
        var repasswd=repasswordInput.value.trim();
        var password = passwordInput.value.trim();
        var flag=true;
        if (repasswd==password) {
            document.getElementById("repassword_err").style.display = 'none';
        } else {
            document.getElementById("repassword_err").style.display = '';
            flag=false;
        }
        return flag;
    }
    var xmInput=document.getElementById("name");
    xmInput.onblur=checkXm;
    function checkXm(){
        var xme=xmInput.value.trim();
        var flag=true;
        if (xme=="") {
            document.getElementById("xm").style.display = '';
            flag=false;
        } else {
            document.getElementById("xm").style.display = 'none';

        }
        return flag;
    }
    //判断用户名是否存在
    document.getElementById("username").onblur=function (){
        //获取用户名
        var username=this.value;
        var xhttp;
        if (window.XMLHttpRequest) {
            xhttp = new XMLHttpRequest();
        } else {

            xhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.发送请求
        xhttp.open("GET", "http://localhost:8080/ajaxServlet?username="+username);
        xhttp.send();
        //3.获取响应

        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                if (this.responseText=="true"){
                    //用户名存在
                    document.getElementById("username_er").style.display = 'none';
                }else {
                    //用户名不存在
                    document.getElementById("username_er").style.display = '';
                }
            }
        };
    }

</script>

</body>
</html>
